Best of Modern JavaScript — Loops and Array.from

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the for-of loop and the Array.from method.

Iterating with Existing Variables, Object Properties, and Array Elements

We can iterate with variables that have already been defined.

For instance, we can write:

let x;
for (x of [1, 2, 3]) {
  console.log(x);
}

We assign the array entry to x , which is defined before the loop block.

We can also iterate with an object property.

For example, we can write:

const obj = {};
for (obj.foo of [1, 2, 3]) {
  console.log(obj.foo);
}

We defined obj outside the loop and attached the foo property to it.

We can also iterate with an array element:

const arr = [];
for (arr[0] of [1, 2, 3]) {
  console.log(arr[0]);
}

We set the first entry of arr as we loop through it.

Iterating with a Destructuring Pattern

We can iterate with the destructuring pattern.

For example, we can write:

const map = new Map().set(1, 'foo').set(2, 'bar');
for (const [key, value] of map) {
  console.log(key, value);
}

We create a Map instance with the key and value.

Then we can loop through it with the key and value destructured from each map entry.

And then we can use it anywhere in the loop body.

We can do the same with array.entries() it returns an array with entries with the [key, value] pattern.

For example, we can write:

const arr = ['foo', 'bar', 'baz'];
for (const [key, value] of arr.entries()) {
  console.log(key, value);
}

Then we destructured the return entries and log them.

New Array Features

The Array constructor gained various instance and static methods with ES6.

New Static Array Methods

One of the new static Array method includes the Array.from method.

It takes an array-like or iterable object and returns an array.

For example, we can write:

const arrayLike = {
  length: 2,
  0: 'foo',
  1: 'bar'
};

const arr = Array.from(arrayLike);
for (const a of arr) {
  console.log(a);
}

We convert the arrayLike object into an array with the Array.from method.

An array-like object is one with the length property and numeric indexes.

We can’t use these kinds of object with the for-of loop.

So if we write:

const arrayLike = {
  length: 2,
  0: 'foo',
  1: 'bar'
};

for (const a of arrayLike) {
  console.log(a);
}

We’ll get the error ‘Uncaught TypeError: arrayLike is not iterable’.

We can also convert iterable objects to arrays with Array.from .

For instance, given the following HTML:

<div>
  foo
</div>
<div>
  bar
</div>
<div>
  baz
</div>

We can get a NodeList with the div nodes, convert it to an array, and the loop through it.

For instance, we can write:

const divs = document.querySelectorAll('div');

for (const d of Array.from(divs)) {
  console.log(d.textContent);
}

We call Array.from to convert the NodeList to an array.

And then we can use it with the for-of loop.

This is different from the old way, where we call slice with the call method:

const divs = document.querySelectorAll('div');
const arr = Array.prototype.slice.call(divs);
for (const d of arr) {
  console.log(d.textContent);
}

Conclusion

We can use the for-of loop with various kinds of variables.

Also, the Array.from lets us convert an array-like or iterable object to an array.